A basic example of clearing your canvas

This is a demonstration of how the RGraph.Reset(canvas) function may be preferable to the RGraph.Clear() function. It is particularly apt if you're using the same canvas to show multiple charts. Because RGraph tracks objects so that it can redraw them you may find old charts being redrawn. In this case you can use the RGraph.Reset(canvas) function instead of the RGraph.Clear(canvas) function to eliminate traces of prior charts.

This goes in the documents header:

<script src="RGraph.common.core.js"></script>
<script src="RGraph.common.dynamic.js"></script>
<script src="RGraph.common.tooltips.js"></script>
<script src="RGraph.line.js"></script>
<script src="RGraph.bar.js"></script>

Put this where you want the chart to show up:

<canvas id="cvs" width="600" height="250">[No canvas support]</canvas>

<button onclick="DrawBar()">Draw the Bar chart</button>
<button onclick="DrawLine()">Draw the Line chart</button>
<button onclick="RGraph.Clear(document.getElementById('cvs'))">Clear the canvas</button>
<button onclick="RGraph.Reset(document.getElementById('cvs'))">Reset the canvas</button>
<button onclick="RGraph.Redraw()">Redraw the canvas</button>

This is the code that generates the chart:

<script>
    window.onload = function ()
    {
        DrawBar();
    };
    
    function DrawBar ()
    {
        var labels = ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']

        var bar = new RGraph.Bar({
            id: 'cvs',
            data: [4,8,1,3,5,2,6],
            options: {
                textAccessible: true,
                labels: labels,
                tooltips: labels,
                gutterBottom: 35
            }
        }).draw()
    }
    
    function DrawLine ()
    {
        var line = new RGraph.Line({
            id: 'cvs',
            data: [3,2,2,2,5,4,1],
            options: {
                textAccessible: true,
                labels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                tooltips: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
                gutterBottom: 35
            }
        }).draw()
    }
</script>